<template>
  <el-container>
    <el-header style="margin-top: 40px;">
      <el-row>
        <el-col :span="1">
          <el-button @click="dialog.create.display = true" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        v-loading="page.loading"
        :data="table.data"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          sortable
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          sortable
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          sortable
          prop="size"
          label="大小">
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.size | sizeFilter }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="url"
          label="生成视频地址">
          <template slot-scope="scope">
            <el-button @click="createVideo(scope.row)" type="primary">生成视频地址</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="button"
          label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="play(scope.row)" type="primary" icon="el-icon-video-play"></el-button>
              <el-button @click="remove(scope.row)" type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="load"
        background
        layout="prev, pager, next"
        :total="table.total"
        :current-page="table.page">
      </el-pagination>
    </el-main>

    <el-dialog
      :close-on-click-modal="false"
      title="上传视频"
      :visible.sync="dialog.create.display"
      width="400px">
      <span>
        <el-form label-position="top">
          <el-form-item label="名称" label-width="80">
            <el-input v-model="video.name"></el-input>
          </el-form-item>
          <el-form-item label="文件" label-width="80">
            <el-upload
              name="video"
              ref="upload"
              :on-success="uploadAfter"
              :data="{name: video.name}"
              drag
              accept=".mp4"
              :headers="myHeaders"
              :action="page.uploadUrl"
              :auto-upload="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过{{ page.uploadSize }}</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadAfter">取 消</el-button>
        <el-button type="primary" @click="create">上 传</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="视频预览"
      :visible.sync="dialog.play.display"
      width="60%">
      <span>
        <el-form>
          <el-form-item label="URL">
            <el-input v-model="video.url" readonly></el-input>
          </el-form-item>
        </el-form>
        <video ref="video" autoplay controls width="100%" :src="video.url"></video>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="生成视频地址"
      :visible.sync="dialog.config.display"
      width="20%">
      <span>
        <el-form>
          <el-form-item label="宽度">
            <el-input-number v-model="video.width"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="video.height"></el-input-number>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createVideo_">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { page, remove } from "@/api/video";

import { getToken, getUsername, removeToken } from '@/utils/auth'
export default {
  name: "ContentVideo",
  data () {
    return {
      table: {
        data: null,
        page: 1,
        size: 10,
        total: null
      },
      page: {
        uploadUrl: process.env.VUE_APP_BASE_API + '/video',
        uploadSize: process.env.VUE_APP_UPLOAD_SIZE,
        loading: true
      },
      myHeaders:{
          "X-Token":"",
          "username":""
      },
      dialog: {
        create: {
          display: false
        },
        play: {
          display: false
        },
        config: {
          display: false
        }
      },
      video: {
        id: null,
        name: null,
        file: null,
        url: null,
        width: null,
        height: null
      }
    }
  },
  filters: {
    sizeFilter (value) {

      let size = parseInt(value)
      if (size > 1024 && size < 1024 * 1024)
        return (parseInt(value) / 1024).toFixed(2) + 'KB'
      else if (size > 1024 * 1024)
        return (parseInt(value) / 1024 / 1024).toFixed(2) + 'MB'
    }
  },
  methods: {
    play(row) {
      this.dialog.play.display = true;
      this.video.url = row.url;
    },
    close () {
      this.$refs.video.pause();
      this.dialog.play.display = false;
    },
    createVideo (row) {
      this.video.url = row.url;
      this.dialog.config.display = true;
    },
    createVideo_ () {
      this.copy(`<iframe src="${this.video.url}" width="${this.video.width}" height="${this.video.height}"></iframe>`)
      this.dialog.config.display = false;
      this.video.url = {
        width: null,
        height: null,
        url: null
      }
    },
    copy(data) {
      let url = data
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand("Copy") // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
    },
    create () {
      this.$refs.upload.submit();
    },
    remove (row) {
      this.$confirm('您是否确认删除该视频', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then( res => {
          this.load()
        })
      })
    },
    uploadAfter () {
      this.$refs.upload.clearFiles();
      this.dialog.create.display = false;
      this.load();
    },
    load (_page) {
      this.page.loading = true
      let _current = 1
      if (_page === undefined)
        _current = this.table.page;
      else
        _current = _page
      page({ page: _current, size: this.table.size }).then( res => {
        const { list, count } = res.data
        this.table.data = []
        this.table.data = list
        this.table.total = count
        this.page.loading = false
      }).catch(err => {
        this.page.loading = false
        console.log(err)
      })
    }
  },
  mounted() {
    this.load()
    this.myHeaders = {
        "X-Token":getToken(),
        "username":getUsername()
    }
  }
}
</script>

<style scoped>

</style>
